/*
 * @FilePath: 下载并引入 gsap 动画库.js
 * @Author: 杜芬
 * @Date: 2024-04-15 22:15:45
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-04-17 16:24:25
 * Copyright: 2024 xxxTech CO.,LTD. All Rights Reserved.
 * @Descripttion: 页面
 */
import { scene, camera, renderer } from './utils/init'
import * as THREE from 'three'

// 1. 下载并引入 gsap 动画库
import gsap from 'gsap'

// 目标：借助 gsap 动画库实现球体缓冲往复位移
// 使用：
// 1. 下载并引入 gsap 动画库
// 2. 使用 gsap.to() 设置动画
// 3. 根据文档调整相关效果

let sphere // 球体变量
function createFloor() {
  const geometry = new THREE.PlaneGeometry(10, 10)
  const material = new THREE.MeshStandardMaterial({
    color: 0xffffff,
    side: THREE.DoubleSide
  })
  const plane = new THREE.Mesh(geometry, material)
  plane.receiveShadow = true // 平面接收阴影
  plane.rotation.set(- Math.PI / 2, 0, 0)
  scene.add(plane)
}
function createLight() {
  // 环境光
  // const light = new THREE.AmbientLight(0xffffff, 1)
  // scene.add(light)

  // 点光源（灯泡）
  // const light = new THREE.PointLight(0xffffff, 1, 100);
  // light.position.set(3, 3, 3);
  // scene.add(light);

  // const pointLightHelper = new THREE.PointLightHelper(light, 1);
  // scene.add(pointLightHelper);

  // 平行光（太阳）
  // const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
  // directionalLight.position.set(3, 3, 3);
  // scene.add(directionalLight);

  // const helper = new THREE.DirectionalLightHelper(directionalLight, 1);
  // scene.add(helper);


  // 聚光灯（手电）
  const spotLight = new THREE.SpotLight(0xffffff, 1);
  spotLight.position.set(13, 13, 13);
  // 灯光的纹理（会把图片和聚光灯颜色混合后打在目标物体上）
  // spotLight.map = new THREE.TextureLoader().load('image/desert.jpg');
  spotLight.castShadow = true // 灯光产生阴影


  // 让聚光灯打出阴影的大小 （是2的几次幂值）
  spotLight.shadow.mapSize.width = 1048;
  spotLight.shadow.mapSize.height = 1048;

  scene.add(spotLight)

  const spotLightHelper = new THREE.SpotLightHelper(spotLight);
  scene.add(spotLightHelper);
}

// 创建球体
function createSphere() {
  // 创建几何球体
  const geometry = new THREE.SphereGeometry(1,32,16)
  // 创建材质
  const material = new THREE.MeshBasicMaterial({
    color: 0x00ff00
  })
  // 创建物体
   sphere = new THREE.Mesh(geometry,material)
  sphere.position.set(0 , 1 , 0)
  sphere.castShadow = true // 物体产生阴影（参与阴影计算）
  // 把物体加入到场景中
  scene.add(sphere)
}


// 动画库
function initAnimation() {
  // 2.使用 gsap.to() 设置动画 (做一个补间动画)
  // 参数1：标签选择器/DOM对象/物体对象/
  // 参数2：动画相关配置
 const aniObj = gsap.to(sphere.position, {
      // 3. 根据文档调整相关效果
      x: 5, // 对参数 1 目标对象做什么属性的变化
      duration: 3, // 动画持续时间
      delay: 2, //// 延迟 2 秒后在做当前动画
      repeat: -1, //  来回做动画 无限循环
      yoyo: true, // 回来的时候也做动画
      ease: "bounce.out", // 设置缓冲效果（参考： https://greensock.com/docs/v3/Eases）调整使用的内置字符串模式

      onStart() {
        console.log('动画开始')
      },
      onUpdate() {
        console.log('动画更新')
      },
      onComplete() {
        console.log('动画结束')
      }
  })
  // 双击时动画
  window.addEventListener('dblclick', () => {
    if(aniObj.isActive()){
      // 当前动画运行中为true
      aniObj.pause() // 暂停动画
    }else {
      // 暂停-》恢复
      aniObj.resume() // 开始动画
    }

  })
}



camera.position.set(5, 5, 5)
renderer.shadowMap.enabled = true
// renderer.shadowMap.enabled = true // 开启阴影渲染支持
createLight()
createSphere() 
createFloor()
initAnimation()